<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- top的高度等于悬浮菜单tabs的高度 -->
	<mescroll-uni
		@init="mescrollInit"
		:height="height"
		:down="downOption"
		@down="downCallback"
		:up="upOption"
		@up="upCallback"
		@emptyclick="emptyClick"
	>
		<!-- 数据列表 -->
		<cms-list :list="lists"></cms-list>
	</mescroll-uni>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import { getNews } from '@/api/index';
	import CmsList from './cms-list.vue';

	const props = defineProps({
		i: Number, // 每个tab页的专属下标
		index: {
			// 当前tab的下标
			type: Number,
			default() {
				return 0;
			},
		},
		tabs: {
			// 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default() {
				return [];
			},
		},
		height: [Number, String], // mescroll的高度
	});

	const emit = defineEmits(['init']);

	// mescroll-uni不用传onPageScroll, onReachBottom
	const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook

	defineExpose({ getMescroll }); // 使父组件可以通过ref调用到getMescroll方法 (必须)

	const isAutoInit = props.i === props.index; // 自动加载当前tab的数据
	const downOption = {
		auto: isAutoInit, // 自动加载当前tab的数据
	};

	const upOption = {
		auto: false, // 不自动加载
		noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		empty: {
			tip: '~ 暂无数据 ~', // 提示
			// btnText: '去看看',
		},
	};

	const isInit = ref(isAutoInit); // 当前tab是否已初始化
	const lists = ref([]); // 数据列表

	// 监听下标的变化
	watch(
		() => props.index,
		(val) => {
			if (props.i === val && !isInit.value) mescrollTrigger();
		}
	);

	// 主动触发加载
	const mescrollTrigger = () => {
		isInit.value = true; // 标记为true
		const mescroll = getMescroll();
		if (mescroll) {
			if (mescroll.optDown.use) {
				mescroll.triggerDownScroll();
			} else {
				mescroll.triggerUpScroll();
			}
		}
	};

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = (mescroll) => {
		console.log('upCallback', upCallback);
		// let word = props.tabs[props.i].name; // 具体项目中,您可能取的是tab中的type,status等字段
		// apiGoods(mescroll.num, mescroll.size, word)
		// 	.then((res) => {
		// 		const list = res.list || []; // 当前页数据
		// 		if (mescroll.num == 1) lists.value = []; //如果是第一页需手动制空列表
		// 		lists.value = lists.value.concat(list); //追加新数据
		// 		mescroll.endSuccess(list.length); // 请求成功, 结束加载
		// 	})
		// 	.catch(() => {
		// 		mescroll.endErr(); // 请求失败, 结束加载
		// 	});

		//联网加载数据
		getNews({
			size: mescroll.size,
			page: mescroll.num,
			type: props.i + 1,
		}).then((res) => {
			emit('init');
			if (mescroll.num == 1) lists.value = [];
			if (res.code == 1) {
				lists.value = lists.value.concat(res.data.list);
				mescroll.endSuccess(res.data.list.length);
			} else {
				mescroll.endErr();
			}
		});
	};

	//点击空布局按钮的回调
	const emptyClick = () => {
		uni.showToast({
			title: '点击了按钮,具体逻辑自行实现',
		});
	};
</script>
